<template>
  <div class="settingpaypassword">
    <van-nav-bar
      @click-left="$router.back()"
      left-arrow
      :title="$route.query.bind ? '已绑定企业账号' : '绑定企业账号'"
      fixed
    ></van-nav-bar>
    <div class="main">
      <van-cell
        title="已绑定手机号"
        :value="userInfo.phone"
        v-if="$route.query.bind"
      />
      <div class="title" v-if="$route.query.bind">
        <h3>更改绑定账号</h3>
        <p>（更换即自动解除原有账号）</p>
      </div>
      <van-field
        v-if="$route.query.bind"
        v-model.trim="nowPhone"
        type="number"
        clearable
        label="新手机号"
        placeholder="请输入手机号"
      />
      <van-field
        v-else
        v-model.trim="phone"
        type="number"
        clearable
        label="手机号"
        placeholder="请输入手机号"
      />

      <van-field
        v-model.trim="code"
        type="number"
        center
        clearable
        label="手机验证码"
        placeholder="请输入手机验证码"
        use-button-slot
      >
        <div
          v-if="showTime === null"
          class="codebtn"
          @click="send"
          slot="button"
        >
          获取验证码
        </div>
        <div v-else class="codebtn" slot="button">
          {{ showTime }}
        </div>
      </van-field>
      <van-field
        v-if="$route.query.bind"
        v-model.trim="originalCode"
        type="number"
        center
        clearable
        label="原手机验证码"
        placeholder="请输入原手机验证码"
        use-button-slot
      >
        <div
          v-if="showTimes === null"
          class="codebtn"
          @click="sends"
          slot="button"
        >
          获取验证码
        </div>
        <div v-else class="codebtn" slot="button">
          {{ showTimes }}
        </div>
      </van-field>
    </div>
    <div class="contents-btn" @click="save">保存</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      phone: "",
      nowPhone: "", //新手机号码
      originalCode: "", //原手机验证码
      code: "",
      showTime: null,
      showTimes: null,
      userInfo: {},
    };
  },
  watch: {
    ["cardNumber"](val) {
      this.$nextTick(() => {
        this.cardNumber = val.replace(/\s/g, "").replace(/....(?!$)/g, "$& ");
      });
    },
  },
  created() {
    document.querySelector("html").style.backgroundColor = "#f3f5f7";
    document.querySelector("body").style.backgroundColor = "#f3f5f7";
  },
  mounted() {
    this.userInfo = this.$store.state.userInfo;
  },
  methods: {
    formatter(value) {
      // 过滤输入的非数字
      return value.replace(/[^\d]/g, "");
    },
    // 保存
    async save() {
      if (this.$route.query.bind) {
        // 换绑
        let { nowPhone, originalCode, code } = this;
        if (nowPhone == "") return this.$toast("请输入新手机号");
        if (code == "") return this.$toast("请输入新手机验证码");
        if (originalCode == "") return this.$toast("请输入原手机验证码");
        let obj = {
          originalPhone: this.userInfo.phone, // 原来的手机号码
          originalCode, //原来的手机验证码
          customerId: this.$store.state.userInfo.id,
          nowPhone, //现在手机号码
          nowCode: code, //现在手机验证码
        };
        let res = await this.$api.changeTheNumber(obj);
        if (res.code != 0) return this.$toast(res.msg);
        this.$toast("换绑成功");
        setTimeout((_) => {
          this.$router.push("/mine");
        }, 800);
      } else {
        //绑定
        if (this.phone == "") {
          this.$toast("请输入手机号");
          return;
        } else if (this.code == "") {
          this.$toast("请输入验证码");
          return;
        }

        let obj = {
          phone: this.phone,
          customerId: this.$store.state.userInfo.id,
          codes: this.code,
          openId: this.$store.state.userInfo.openId,
        };

        this.$api.bindingInformation(obj).then((res) => {
          if (res.code == 0) {
            this.$toast("绑定成功");
            this.$router.push("/mine");
          } else {
            this.$toast(res.msg);
          }
        });
      }
    },
    // 倒计时显示处理
    countDownText(s) {
      this.showTime = `${s}s后重新获取`;
    },
    // 倒计时 60秒 不需要很精准
    countDown(times) {
      const self = this;
      // 时间间隔 1秒
      const interval = 1000;
      let count = 0;
      self.timeCounter = setTimeout(countDownStart, interval);
      function countDownStart() {
        if (self.timeCounter == null) {
          return false;
        }
        count++;
        self.countDownText(times - count + 1);
        if (count > times) {
          clearTimeout(self.timeCounter);
          self.showTime = null;
        } else {
          self.timeCounter = setTimeout(countDownStart, interval);
        }
      }
    },
    send() {
      if (this.$route.query.bind) {
        this.phone = this.nowPhone;
      }
      if (this.phone == "") {
        this.$toast("请输入手机号");
        return;
      } else {
        this.countDown(60);
        this.$api.getCode({ phone: this.phone }).then((res) => {
          if (res.code == 0) {
            this.$toast("验证码发送成功，请查收！");
          } else {
            this.$toast("请重新发送");
          }
        });
      }
    },
    sends() {
      this.countDowns(60);
      this.$api.getCode({ phone: this.userInfo.phone }).then((res) => {
        if (res.code == 0) {
          this.$toast("验证码发送成功，请查收！");
        } else {
          this.$toast("请重新发送");
        }
      });
    },
    countDowns(time) {
      let cont = 0;
      this.times = setInterval(() => {
        console.log(1);
        if (cont > time) {
          clearInterval(this.times);
          this.showTimes = null;
          this.times = null;
        } else {
          cont++;
          this.showTimes = `${time - cont + 1}s后重新获取`;
        }
      }, 1000);
    },
  },
};
</script>
<style lang="less" scoped>
.main {
  padding-top: 46px;
  .title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 26px 0;
    h3 {
      font-size: 13px;
      color: #333333;
    }
    p {
      font-size: 11px;
      color: #999999;
    }
  }
}
.codebtn {
  width: 100px;
  height: 30px;
  opacity: 1;
  border: 1px solid #0264d1;
  border-radius: 25px;
  text-align: center;
  line-height: 30px;
  color: #0264d1;
}
.contents-btn {
  position: fixed;
  left: 37.5px;
  bottom: 100px;
  width: 80%;
  height: 40px;
  opacity: 1;
  background: #477fe6;
  border-radius: 41px;
  text-align: center;
  line-height: 40px;
  color: #ffffff;
}
</style>
